<template>
    <div>
        <h2>人员信息:</h2>
        姓：<input type="text" v-model.trim="firstName"><br/>
        名：<input type="text" v-model.trim="lastName"><br/>
        全名：<span>{{fullName}}</span><br/>
        <button @click="updateFullName">修改fullName</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {computed, ref} from "vue";
let firstName = ref('zhang')
let lastName = ref('san')
// 也可使用方法实现，计算属性有缓存
// 这么定义的fullName是一个计算属性，且是只读的
// let fullName = computed(()=> {
//     return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'--'+lastName.value
// })

// 这么定义的fullName是一个计算属性，可读可写
let fullName = computed({
    get() {
        return firstName.value.slice(0,1).toUpperCase()+firstName.value.slice(1)+'--'+lastName.value
    },
    set(val) {
        const [str1,str2] = val.split('--')
        firstName.value = str1
        lastName.value = str2
    }
})

function updateFullName() {
    fullName.value = 'li--si'
}
</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
